/****************
 *@description: APP管理->公告管理->系统公告
 *@author: Xhd
 *@API: 清悦
 *@Product: 尹乐恺
 *@date: 2024-04-28 11:47:04
 *@version: V1.0.0 
*************************************************************************/

import React, { Component } from 'react';
import { Tabs } from 'antd';
import TheQueryForm from '@/components/TheQueryForm';
import TheTable from '@/components/TheTable';
import ThePagination from '@/components/ThePagination';
import TheButton from '@/components/TheButton';
import { apiSystemAnnouncementPage, apiSystemAnnouncementDel, apiSystemAnnouncementAdd } from '@/request/systemNotice';
export default class SystemNotice extends Component {
  constructor() {
    super()
    this.queryFormRef = React.createRef()
    this.state = {
      activekey: '0',
      listOptions: [
        { field: 'title', label: '标题', placeholder: '请输入', required: false, type: 'Input', defaultValue: '', maxLength: 60 },
        {
          field: "announcementState", label: "状态", placeholder: "", required: false, rules: [], type: "Select",
          options: [
            { value: "", label: "全部" },
            { value: 1, label: "待推送" },
            { value: 2, label: "已推送" },
          ],
          defaultValue: "",
        },
      ],
      draftOptions: [
        { field: 'title', label: '标题', placeholder: '请输入', required: false, type: 'Input', defaultValue: '', maxLength: 60 },
      ],
      listColumns: [
        {
          title: "排序",
          dataIndex: "index",
          key: "index",
        },
        {
          title: "标题",
          dataIndex: "title",
          key: "title",
        },
        {
          title: "发送人群",
          dataIndex: "visibleRange",
          key: "visibleRange",
          render: (text) => {
            let label = ""
            switch (text) {
              case 0:
                label = "全部"
                break;
              case 1:
                label = "指定用户可见"
                break;
              case 2:
                label = "屏蔽指定用户"
                break;
              default:
                break;
            }
            return label
          }
        },
        {
          title: "公告类型",
          dataIndex: "announcementType",
          key: "announcementType",
          render: (text) => {
            let label = ""
            switch (text) {
              case 0:
                label = "文字公告"
                break;
              case 1:
                label = "图文公告"
                break;
              default:
                break;
            }
            return label
          }
        },
        {
          title: "推送时间",
          dataIndex: "pushTime",
          key: "pushTime",
        },
        {
          title: "状态",
          dataIndex: "announcementState",
          key: "announcementState",
          render: (text) => {
            let label = ""
            switch (text) {
              case 0:
                label = "草稿"
                break;
              case 1:
                label = "待推送"
                break;
              case 2:
                label = "已推送"
                break;
              default:
                break;
            }
            return label
          }
        },
        {
          title: "阅读量",
          dataIndex: "readingVolume",
          key: "readingVolume",
        },
        {
          title: "操作",
          dataIndex: "operate",
          key: "operate",
          fixed: "right",
          render: (text, record) => {
            return <div>
              <TheButton haspermi={['system:notice:view']} onClick={() => this.createOrEditNotice("view", record.announcementId)} >详情</TheButton>
              {record.announcementState !== 2 && <>
                <TheButton haspermi={['system:notice:edit']} onClick={() => this.createOrEditNotice("edit", record.announcementId)} >修改</TheButton>
                { }
                {record.announcementState !== 0 &&
                  <TheButton haspermi={['system:notice:cancelPush']} onClick={() => {
                    React.$confirm({
                      title: "您确认取消推送公告吗？",
                      onOk: ()=> this.cancelPush(record.announcementId)
                    });
                  }} >取消推送</TheButton>
                }
              </>}
            </div>
          }
        },
      ],
      draftColumns: [
        {
          title: "排序",
          dataIndex: "index",
          key: "index",
        },
        {
          title: "标题",
          dataIndex: "title",
          key: "title",
        },
        {
          title: "发送人群",
          dataIndex: "visibleRange",
          key: "visibleRange",
          render: (text) => {
            let label = ""
            switch (text) {
              case 0:
                label = "全部"
                break;
              case 1:
                label = "指定用户可见"
                break;
              case 2:
                label = "屏蔽指定用户"
                break;
              default:
                break;
            }
            return label
          }
        },
        {
          title: "推送时间",
          dataIndex: "pushTime",
          key: "pushTime",
        },
        {
          title: "状态",
          dataIndex: "announcementState",
          key: "announcementState",
          render: (text) => {
            let label = ""
            switch (text) {
              case 0:
                label = "草稿"
                break;
              case 1:
                label = "待推送"
                break;
              case 2:
                label = "已推送"
                break;
              default:
                break;
            }
            return label
          }
        },
        {
          title: "操作",
          dataIndex: "operate",
          key: "operate",
          fixed: "right",
          render: (text, record) => {
            return <div>
              <TheButton haspermi={['system:notice:edit']} onClick={() => this.createOrEditNotice("edit", record.announcementId)} >修改</TheButton>
              <TheButton haspermi={['system:notice:publish']} onClick={() => {
                React.$confirm({
                  title: "您确认发布公告吗？",
                  onOk: ()=> this.publish(record.announcementId)
                });
              }}  >发布</TheButton>
              <TheButton haspermi={['system:notice:erase']} onClick={() => {
                React.$confirm({
                  title: "您确认删除公告吗？",
                  onOk: ()=> this.erase(record.announcementId)
                });
              }} >删除</TheButton>
            </div>
          }
        },
      ],
      listDataSource: [],
      draftDataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total1: 0,
      total2: 0,
      queryForm: {},
    }
  }

  componentDidMount() {
    this.getListData()
    this.getDraftData()
  }
  getListData = async (values) => {
    const { pageData } = this.state
    await apiSystemAnnouncementPage({ ...pageData, ...values }).then(res => {
      if (res.code === 0) {
        let listDataSource = res.data.map((v, k) => {
          v.index = k + 1 + (pageData.pageNo - 1) * 10
          return v
        })
        this.setState({
          listDataSource,
          total1: res.totalCount
        })
      }
    })
  }
  getDraftData = async (values) => {
    const { pageData } = this.state
    await apiSystemAnnouncementPage({ ...pageData, announcementState: 0, ...values }).then(res => {
      if (res.code === 0) {
        let draftDataSource = res.data.map((v, k) => {
          v.index = k + 1 + (pageData.pageNo - 1) * 10
          return v
        })
        this.setState({
          draftDataSource,
          total2: res.totalCount,
        })
      }
    })
  }
  // 公告列表/草稿箱 切换
  tabsChange = (activekey) => {
    this.setState({
      activekey
    })
    this.onReset()
  }
  // 新建公告 // 详情 // 修改
  createOrEditNotice = (type, id) => {
    this.props.history.push(`/systemNotice/createOrEdit/${type}/${id}`)
  }
  // 取消推送
  cancelPush = async (id) => {
    let api = apiSystemAnnouncementAdd
    await api({ announcementId: id, announcementState: 0 }).then(res => {
      if (res.code === 0) {
        React.$message({
          type: 'success',
          content: '取消推送成功'
        })
        this.pageChange(1, 10)
      }
    })
  }
  // 发布
  publish = async (id) => {
    let api = apiSystemAnnouncementAdd
    await api({ announcementId: id, announcementState: 1 }).then(res => {
      if (res.code === 0) {
        React.$message({
          type: 'success',
          content: '发布成功'
        })
        this.pageChange(1, 10)
      }
    })
  }
  // 删除
  erase = async (id) => {
    let api = apiSystemAnnouncementDel
    await api({ announcementId: id }).then(res => {
      if (res.code === 0) {
        React.$message({
          type: 'success',
          content: '删除成功'
        })
      }
      this.pageChange(1, 10)
    })
  }
  // 查询
  onFormSearch = (values) => {
    const { activekey } = this.state
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.setState({
        queryForm: { ...values }
      }, () => {
        if (activekey === "0") {
          this.getListData(values)
        } else {
          this.getDraftData(values)
        }
      })
    })
  }
  // 重置
  onReset = () => {
    this.setState({
      queryForm: {},
    }, () => {
      this.pageChange(1, 10)
    })
  }
  // 分页
  pageChange = (pageNo, pageSize) => {
    const { activekey, queryForm } = this.state
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      if (activekey === "0") {
        this.getListData(queryForm)
      } else {
        this.getDraftData(queryForm)
      }
    })
  }

  render() {
    const { activekey, listOptions, draftOptions, listColumns, draftColumns, listDataSource, draftDataSource, pageData: { pageNo, pageSize }, total1, total2 } = this.state
    return (
      <div className="p-layout-box commodity-examine">
        <Tabs defaultActiveKey={activekey} onChange={(key) => this.tabsChange(key)} type="card" destroyInactiveTabPane >
          <Tabs.TabPane key={'0'} tab="公告列表" >
            <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={true} option={listOptions} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} />
            <div style={{ marginBottom: "10px", textAlign: "right" }}>
              <TheButton haspermi={['system:notice:create']} type="primary" size="middle" onClick={() => this.createOrEditNotice("create")} >新建公告</TheButton>
            </div>
            <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={listColumns} dataSource={listDataSource} />
            <ThePagination pageNo={pageNo} pageSize={pageSize} total={total1} pageChange={this.pageChange} />
          </Tabs.TabPane>
          <Tabs.TabPane key={'1'} tab="草稿箱" >
            <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={true} option={draftOptions} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} />
            <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={draftColumns} dataSource={draftDataSource} />
            <ThePagination pageNo={pageNo} pageSize={pageSize} total={total2} pageChange={this.pageChange} />
          </Tabs.TabPane>
        </Tabs>
      </div>
    );
  }
}
